import React, { Component } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import './Header.css';

class Header extends Component {
	state = {
		// 搜索的关键字
		keyWords: ''
	}
	getKeyWords = (e) => {
		if (e.target.value.trim().length === 0 && e.keyCode === 13) {
			window.alert('请重新输入，不能输入为空的关键词！');
			e.target.value = '';
			this.setState({
				keyWords: ''
			})
		} else if (e.keyCode === 13) {
			this.setState({
				keyWords: e.target.value.trim(),
			}, function () {
				this.props.history.push(`/index/search?keywords=${this.state.keyWords}&type=0`);
			})
		}
	}
	render () {
		return (
			<div className='header_box'>
				<div className='header'>
					<ul className='list'>
						<li>
							<NavLink activeClassName='active' to='/index/faxianmusic'>发现音乐</NavLink>
						</li>
						<li>
							<NavLink activeClassName='active' to='/index/tuijiangedan'>推荐歌单</NavLink>
						</li>
						<li>
							<NavLink activeClassName='active' to='/index/zuixinsong'>最新歌曲</NavLink>
						</li>
						<li>
							<NavLink activeClassName='active' to='/index/zuixinmv'>推荐MV</NavLink>
						</li>
						<li>
							<NavLink activeClassName='active' to='/index/remengeshou'>热门歌手</NavLink>
						</li>
						<li>
							<NavLink activeClassName='active' to='/index/news'>音乐新闻</NavLink>
						</li>
						<li>
							<NavLink activeClassName='active' to='/index/my'>我的</NavLink>
						</li>
					</ul>
					<div className='search_box'>
						<input placeholder='请输入关键词,按回车键搜索' type="text" onKeyUp={this.getKeyWords} name="" id="" />
					</div>
				</div>
			</div>
		)
	}
}
// 包裹路由对象
export default withRouter(Header);

